<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索结果</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f9f9f9;
        }

        .container {
            max-width: 800px;
            margin: auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .article-list {
            list-style: none;
            padding: 0;
        }

        .article-item {
            margin-bottom: 20px;
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .article-title {
            color: #333;
            margin: 0;
            font-size: 24px;
        }

        .article-author {
            color: #666;
            margin: 5px 0;
        }

        .article-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .article-date {
            color: #666;
        }

        .read-more {
            color: #007BFF;
            text-decoration: none;
            font-weight: bold;
        }

        .read-more:hover {
            text-decoration: underline;
        }

        .pagination {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .back-home {
            display: inline-block;
            padding: 10px 15px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .back-home:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>搜索结果</h1>
    <!-- 显示文章列表 -->
    <ul class="article-list">
        <li th:if="${articles == null or articles.isEmpty()}" class="no-articles">
            <p>没有找到相关的文章。</p>
        </li>
        <li th:each="article : ${articles}" class="article-item">
            <h2 class="article-title" th:text="${article.title}"></h2> <!-- 显示文章标题 -->
            <p class="article-author" th:text="'作者: ' + ${article.username}"></p>
            <div class="article-info">
                <p class="article-date" th:text="'发布日期: ' + ${article.updatetime}"></p>
                <a th:href="@{'/articles/' + ${article.id}}" class="read-more">阅读全文</a>
            </div>
        </li>
    </ul>

    <div class="pagination">
        <span th:if="${currentPage > 0}">
            <a th:href="@{/search(query=${query}, page=${currentPage - 1})}" class="back-home">上一页</a>
        </span>
        <span th:text="'当前页：' + ${currentPage + 1} + ' / ' + ${totalPages}"></span>
        <span th:if="${currentPage < totalPages - 1}">
            <a th:href="@{/search(query=${query}, page=${currentPage + 1})}" class="back-home">下一页</a>
        </span>
    </div>
    <a class="back-home" href="/login/goToBlog">返回主页</a>
</div>
</body>
</html>